<template>
  <div class="demo-form">
    <ep-advance-card title="数智工坊接口-ab_001" theme="theme-1" class="m-b-15">
      <ep-row :gutter="10">
        <ep-col :col="12">
          <ep-form name-position="left">
            <ep-form-item label="当前用户:">{{ userMainInfo.username }}</ep-form-item>
            <ep-form-item label="说明:"
              >这是一个测试页面，展示一些基本的布局,这是一个测试页面，展示一些基本的布局,这是一个测试页面，展示一些基本的布局,这是一个测试页面，展示一些基本的布局</ep-form-item
            >
          </ep-form>
        </ep-col>
        <ep-col :col="6">
          <ep-form name-position="left">
            <ep-form-item label="使用次数:">123</ep-form-item>
            <ep-form-item label="变更次数:">1</ep-form-item>
            <ep-form-item label="创建者:">easipass</ep-form-item>
            <ep-form-item label="标签:"
              ><span class="tag-demo">生产</span><span class="tag-demo" style="color: #80b188; border-color: #80b188">接口</span></ep-form-item
            >
          </ep-form>
        </ep-col>
        <ep-col :col="6">
          <!-- <ep-button type="primary" icon="3-ios-cloud" @click="test">在线调试</ep-button> -->
          <ep-upload manual :http-request="test" style="display: inline-block">
            <ep-button type="primary" icon="3-ios-cloud">请上传</ep-button>
          </ep-upload>
          <ep-divider direction="vertical"></ep-divider>
          <svg-cpt style="fill: #03a9f4; font-size: 25px" icon="car"></svg-cpt>
          <ep-divider direction="vertical"></ep-divider>
          <svg-cpt style="fill: #4caf50; font-size: 25px" icon="car"></svg-cpt>
        </ep-col>
      </ep-row>
    </ep-advance-card>
    <ep-row>
      <!-- 左侧 -->
      <ep-col :col="2">
        <ep-affix :offset-top="86">
          <ep-advance-card theme="theme-1" :cardContStyle="{ padding: 0 }" contHeight="500px">
            <!-- 使用固钉 -->
            <ep-tabs v-model="leftActive" layout="left" theme="card" auto-height>
              <ep-tab-item name="one" label="基本信息"> </ep-tab-item>
              <ep-tab-item name="two" label="标签2"> </ep-tab-item>
              <ep-tab-item name="three" label="标签3"> </ep-tab-item>
            </ep-tabs>
          </ep-advance-card>
        </ep-affix>
      </ep-col>
      <!-- 右侧 -->
      <ep-col :col="22">
        <ep-advance-card theme="theme-1" :cardContStyle="{ 'padding-top': 0 }" class="m-l-15">
          <!-- 使用固钉 -->
          <ep-affix :offset-top="86">
            <ep-tabs v-if="leftActive === 'one'" v-model="active2" ref="tabs" auto-height class="m-b-10">
              <ep-tab-item name="basic" label="基本信息"></ep-tab-item>
              <ep-tab-item name="advance" label="详细信息"></ep-tab-item>
              <ep-tab-item name="intro" label="样例说明"></ep-tab-item>
            </ep-tabs>
          </ep-affix>
          <template v-if="leftActive === 'one' && active2 === 'basic'">
            <ep-advance-card title="基本信息" theme="theme-4">
              <form1 />
            </ep-advance-card>
            <ep-advance-card title="详细信息" theme="theme-4">
              <table1 />
            </ep-advance-card>
            <ep-advance-card title="详细信息" theme="theme-4">
              <table1 />
            </ep-advance-card>
          </template>
          <template v-if="leftActive === 'one' && active2 === 'advance'">
            <ep-row>
              <ep-col :col="12">1</ep-col>
              <ep-col :col="12">1</ep-col>
              <ep-col :col="12">1</ep-col>
            </ep-row>
          </template>
        </ep-advance-card>
      </ep-col>
    </ep-row>
  </div>
</template>

<script>
import form1 from './form1'
import form2 from './form2'
import table1 from './table1'
import { mapState } from 'vuex'

import { post } from '@/utils/request'

export default {
  components: {
    form1,
    form2,
    table1
  },

  data() {
    return {
      leftActive: 'one',
      active2: 'basic'
    }
  },

  computed: {
    ...mapState({
      userMainInfo: state => state.app.userMainInfo || {}
    })
  },

  methods: {
    test(files) {
      let form = new FormData()
      form.append('file', files[0])
      post({
        url: 'http://qq.com',
        dataType: 'file',
        data: form
      })
    }
  }
}
</script>

<style lang="less" scoped>
.demo-form {
  .ep-form {
    /deep/ .ep-form--item {
      margin-bottom: 0px;
    }
    /deep/ .ep-form--label {
      color: #74767e;
    }
  }
  .tag-demo {
    height: 22px;
    background: #fbfdff;
    border-radius: 11px;
    border: 1px solid #3c65c7;
    font-size: 14px;
    color: #5386ed;
    line-height: 22px;
    padding: 2px 10px;
    margin-right: 16px;
  }
}
</style>
